<template>
    <div class="strategy-ul">
        <van-tabs v-model:active="active" @change="handleSelectTab" >

            <div class="tab-content" >
                <van-tab v-for="(item, index) in tabList" :key="index" :title="item.label" >

                    <div class="tab-content" v-if="active == 0">
                        <div class="vip-container">
                            <div class="vip-content">
                                <div class="vip-top">
                                    <img class="vip-logo" width="20" height="20" src="@/assets/img/yikatong.png" alt="">
                                    <!-- <img class="vip-logo" width="20" height="20"  src="@/assets/img/yikaton.png" alt=""> -->
                                    <span>
                                        <span class="vip-text">一卡通</span> 
                                        <span class="vip-little">(全场策略免费用)</span>
                                    </span>
                                </div>
                                <div class="vip-tip">您的一卡通已过期</div>
                            </div>
                            <!-- <div class="btn-vip-container">
                                <img width="30" height="30" src="https://www.aiaabiok.com/ag.png" alt="">
                            </div> -->
                        </div>
                        <div class="vip-container vip-open">
                            <div class="vip-content">
                                <div class="vip-top">
                                    <img class="vip-logo" width="20" height="20" src="@/assets/img/yikaton-active.png" alt="">
                                    <span><span class="vip-text">一卡通</span></span>
                                </div>
                                <div class="vip-tip">全场策略免费用</div>
                            </div>
                            <div class="vip-right">
                                <p ><span class="vip-num">1000</span>天</p>
                                <p class="vip-num-tip">剩余天数</p>
                            </div>
                        </div>
                    </div>
                    <div class="tab-content" v-else>
                        <div class="setting-container">

                            <div class="setting-box">
                                <div class="setting-item setting-header">
                                    <div class="setting-left">策略类型</div>
                                    <div class="setting-center">到期时间</div>
                                    <div class="setting-right">续费</div>
                                </div>
                            </div>

                            <div class="setting-box">
                                <div class="setting-item setting-content">
                                    <div class="setting-left">异动策略</div>
                                    <div class="setting-center">
                                        <span v-if="vip" class="">2023-04-01</span> 
                                        <span>未订阅</span>
                                    </div>
                                    <div class="setting-right">
                                        <!-- 打开开关 -->
                                        <van-button size="small" type="primary">去订阅</van-button>
                                        <!-- 去订阅按钮 -->
                                    </div>
                                </div>
                                <div class="setting-item setting-content">
                                    <div class="setting-left">高低点分型策略</div>
                                    <div class="setting-center">
                                        <span v-if="false">2023-04-01</span> 
                                    </div>
                                    <div class="setting-right">
                                        <!-- 去订阅按钮 -->
                                        <van-button size="small" type="primary">去订阅</van-button>
                                    </div>
                                </div>
                                <div class="setting-item setting-content">
                                    <div class="setting-left">AG趋势策略</div>
                                    <div class="setting-center">
                                        <span class="">2023-04-01</span> 
                                    </div>
                                    <div class="setting-right">
                                        <!-- 打开开关 -->
                                            <van-checkbox v-model="checked1"></van-checkbox>
                                        <!-- <van-button size="small" type="primary">去订阅</van-button> -->
                                        <!-- 去订阅按钮 -->
                                    </div>
                                </div>
                                <div class="setting-item setting-content">
                                    <div class="setting-left">波段跟踪策略</div>
                                    <div class="setting-center">
                                        <span class="">2023-04-01</span> 
                                    </div>
                                    <div class="setting-right">
                                        <!-- 打开开关 -->
                                        <van-button size="small" type="primary">去订阅</van-button>
                                        <!-- 去订阅按钮 -->
                                    </div>
                                </div>
                                <div class="setting-item setting-content">
                                    <div class="setting-left">中长线埋伏策略</div>
                                    <div class="setting-center">
                                        <span class="">2023-04-01</span> 
                                    </div>
                                    <div class="setting-right">
                                        <!-- 打开开关 -->
                                        <van-button size="small" type="primary">去订阅</van-button>
                                        <!-- 去订阅按钮 -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- <van-checkbox-group v-model="checked" @change="handleSelectStrategy">
                            <van-checkbox v-for="item in pushList" :key="item" :name="item" :disabled="pushList.length === 1">
                                {{ item }}
                            </van-checkbox>
                        </van-checkbox-group>
                         -->
                        
                    </div>
                </van-tab>
            </div>
            
           
        </van-tabs>
        
    </div>
</template>

<script>
export default {
    name: 'strategy-list',
    props: {},
    data() {
        return {
            checked1: true,
            checked: ['全部策略'],
            pushList: ['全部策略'],
            checkboxRefs: [],
            
            active: 0,
            tabList: [{
                label: '一卡通', 
                value: 'all',
            }, {
                label: '单独订阅',
                value: 'single',
            }],
            strategyList: [{
                label: ''
            }]
        };
    },
    components: {},
    computed: {},
    watch: {},
    mounted() {
        this.init();
    },
    methods: {
        init() {

        },
        handleSelectTab(item) {
            if (item === 1) {
                this.pushList = ['异动策略', '高低点分型策略', 'AG趋势策略', '波段跟踪策略', '中长线埋伏策略'];
                this.checked = ['异动策略'];
            } else {
                this.pushList = ['全部策略'];
                this.checked = ['全部策略'];
            }
            this.$emit('on-change', {
                type: item,
                strategy: this.checked,
            });
            console.log('=========', item)
        },
        handleSelect(item) {
            this.$emit('on-select', item);
        },

        handleSelectStrategy() {
            console.log('======', this.checked.length)
            this.$emit('on-change', {
                type: this.active,
                strategy: this.checked,
            });
        }
        
    }
};
</script>
<style lang="less" scoped>
.tab-content {
    margin-top: 20px;
}
.van-checkbox {
    margin: 16px;
    padding-left: 55px;
}
.vip-right {
    display: flex;
    align-items: center;
    color: #fff;
    font-weight: 500;
    flex-direction: column;
    p {
        line-height: 20px;
    }
    .vip-num {
        font-size: 30px;
        font-weight: 600;

    }
    .vip-num-tip {
        font-size: 14px;
    }

}



</style>